<template>
  <div class="home_container">
    <el-container>
      <!-- Header区域 -->
      <el-header
        style="text-align: right; font-size: 12px; border: 1px solid #e9e9e9"
      >
        <!-- 欢迎标语  -->
        <span>亲，还您的到来~~~</span>
        <!-- 搜索框 -->
        <el-input
          style="width: 80%; margin-right: 20px"
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
        >
        </el-input>
        <!-- 下拉框 -->
        <el-dropdown @command="handleCommand">
          <i class="el-icon-s-custom" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">退出</el-dropdown-item>
            <el-dropdown-item command="b">设置</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>{{ userName }}</span>
      </el-header>
      <!-- Main区域 -->
      <el-main style="padding: 10px 20px">
        <!-- 头部-商品分类 -->
        <div class="type_tags">
          <el-breadcrumb
            separator="|"
            style="height: 100%; line-height: 40px; padding: 0 10px"
          >
            <el-breadcrumb-item>您是不是想找：</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">手机</a></el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/' }">电脑</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/' }">图书</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/' }">手表</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/' }">鞋子</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/' }">衣服</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/' }">文具</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/' }">家电</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/' }">化妆品</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/' }">建材</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/' }">美颜</el-breadcrumb-item>
            <el-breadcrumb-item></el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 显示商品区域 -->
        <div class="goods_container">
          <el-row :gutter="12" v-for="(item, index) in goodsList" :key="index">
            <el-col
              style="height: 320px;"
              :span="4"
              v-for="goods in item.data"
              :key="goods.productId"
              v-on:click.native="goDetail(goods.productId)"
            >
              <el-card :body-style="{ padding: '0px'}" style="height: 100%;background-color: bisque;">
                <div class="img_div">
                  <img :src="goods.imageUrl" class="image" />
                </div>
                <div style="padding: 14px">
                  <span class="two-line-text">{{ goods.name }}</span>
                  <!-- <div class="bottom clearfix">
                    <time class="time"> 商品ID：{{ goods.productId }} </time>
                    <el-button type="text" class="button">操作按钮</el-button>
                  </div> -->
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <!-- 热门商品推荐-头部 -->
        <div class="hot_goods_header">
          <div>|</div>
          <div>热门商品</div>
        </div>
        <!-- 热门商品推荐-内容区 -->
        <div class="red_goods_container" v-if="has_hot_goods">
          <el-row
            :gutter="12"
            v-for="(item, index) in recentlyHotProductList"
            :key="index"
          >
            <el-col
              style="height: 320px;"
              :span="4"
              v-for="goods in item.data"
              :key="goods.productId"
              v-on:click.native="goDetail(goods.productId)"
            >
              <el-card :body-style="{ padding: '0px' }" style="height: 100%;background-color: bisque;">
                <div class="img_div">
                  <img :src="goods.products[0].imageUrl" class="image" />
                </div>
                <div style="padding: 14px">
                  <span class="two-line-text">{{ goods.products[0].name }}</span>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <!-- 评分最多推荐-头部 -->
        <div class="hot_goods_header">
          <div>|</div>
          <div>评分最多</div>
        </div>
        <!-- 评分最多推荐-内容区 -->
        <div class="red_goods_container" v-if="has_heighest_scores">
          <el-row
            :gutter="12"
            v-for="(item, index) in rateMoreProductList"
            :key="index"
          >
            <el-col
              style="height: 320px;"
              :span="4"
              v-for="goods in item.data"
              :key="goods.productId"
              v-on:click.native="goDetail(goods.productId)"
            >
              <el-card :body-style="{ padding: '0px' }" style="height: 100%;background-color: bisque;">
                <div class="img_div">
                  <img :src="goods.products[0].imageUrl" class="image" />
                </div>
                <div style="padding: 14px">
                  <span class="two-line-text">{{ goods.products[0].name }}</span>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <!-- 个人商品推荐-实时推荐 -->
        <div class="hot_goods_header">
          <div>|</div>
          <div>实时推荐</div>
        </div>
        <!-- 实时推荐-内容区 -->
        <div class="red_goods_container" v-if="has_realtime_rec">
          <el-row
            :gutter="12"
            v-for="(item, index) in realtimeRecProductList"
            :key="index"
          >
            <el-col
              style="height: 320px;"
              :span="4"
              v-for="goods in item.data"
              :key="goods.productId"
              v-on:click.native="goDetail(goods.productId)"
            >
              <el-card :body-style="{ padding: '0px' }" style="height: 100%;background-color: bisque;">
                <div class="img_div">
                  <img :src="goods.imageUrl" class="image" />
                </div>
                <div style="padding: 14px">
                  <span class="two-line-text">{{ goods.name }}</span>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <!-- 个人商品推荐-离线推荐 -->
        <div class="hot_goods_header">
          <div>|</div>
          <div>离线推荐</div>
        </div>
        <!-- 离线推荐-内容区 -->
        <div class="red_goods_container" v-if="has_offline_rec">
          <el-row
            :gutter="12"
            v-for="(item, index) in offlineRecProductList"
            :key="index"
          >
            <el-col
              style="height: 320px;"
              :span="4"
              v-for="goods in item.data"
              :key="goods.productId"
              v-on:click.native="goDetail(goods.productId)"
            >
              <el-card :body-style="{ padding: '0px' }" style="height: 100%;background-color: bisque;">
                <div class="img_div">
                  <img :src="goods.imageUrl" class="image" />
                </div>
                <div style="padding: 14px">
                  <span class="two-line-text">{{ goods.name }}</span>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-main>
      <!-- Footer区域 -->
      <!-- <el-footer>若兰幽竹-小型电商平台-演示</el-footer> -->
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    // 声明template中需要动态绑定的数据
    return {
      has_hot_goods: false, // 是否有热门商品推荐
      has_heighest_scores: false, // 是否有评分最高商品推荐
      has_realtime_rec: false, // 是否有实时商品推荐
      has_offline_rec: false, // 是否有离线商品推荐
      userName: "", // 用户名
      userId: "", // 用户id
      goodsList: [], // 商品列表
      recentlyHotProductList: [], // 最近热门商品
      rateMoreProductList: [],    // 历史评分最多的商品
      offlineRecProductList: [],  // 离线推荐商品列表
      realtimeRecProductList: [], // 实时推荐商品列表
    };
  },
  mounted() {
    // 页面挂载结束时，常用于获取VNode信息和操作，ajax请求
    this.userName = window.sessionStorage.getItem("username"); // 从sessionStorage中获取登录用户信息
    this.userId = window.sessionStorage.getItem("userId"); // 从sessionStorage中获取登录用户ID
    this.goAllGoods(); // 调用商品列表接口
    this.getRecentlyRateMoreProduct(); // 调用热门商品接口
    this.getRateMoreProduct(); // 调用评分最多商品接口
    this.getOfflineRecProducts(this.userId); // 调用离线推荐商品列表接口
    this.getRealtimeRecProducts(this.userId); // 调用实时推荐商品列表接口
  },
  methods: {
    // 用户在methods中可以添加用户自定义的方法
    handleCommand(command) {
      if (command == "a") {
        this.$router.push("/login"); // 当点击了退出按钮，调用退出方法
        window.sessionStorage.clear(); // 清空当前用户信息
      }
      if (command == "b") {
        // 当点击了设置按钮，调用设置方法，目前只是测试关于热门商品显示和隐藏的效果
        this.has_hot_goods = !this.has_hot_goods;
      }
    },
    goDetail(index) {
      this.$message({
        message: "点击了第 " + index + " 个商品",
        type: "success",
      });
      this.$router.push({
        path: "/detail",
        name: "Detail",
        params: {
          id: index,
        },
      });
    },
    async goAllGoods() {
      const { data: list } = await this.$http.get("/product/getProductList");
      const dataList = list.data.data;
      this.goodsList = this.createElRows(dataList);
    },
    async getRecentlyRateMoreProduct() {
      // 获取最近热门商品数据
      const { data: list } = await this.$http.get("/product/getRecentlyRateMoreProductList");
      const dataList = list.data.data;
      if (dataList == null || 0 == dataList.length) {
        this.has_hot_goods = false;
        return;
      }
      this.has_hot_goods = true;
      this.recentlyHotProductList = this.createElRows(dataList);
    },
    async getRateMoreProduct() {
      // 获取历史评分次数最多商品数据
      const { data: list } = await this.$http.get("/product/getRateMoreProductList");
      const dataList = list.data.data;
      if (dataList == null || 0 == dataList.length) {
        this.has_heighest_scores = false;
        return;
      }
      this.has_heighest_scores = true;
      this.rateMoreProductList = this.createElRows(dataList);
    },
    async getOfflineRecProducts(userId) {
      if(userId == "" || userId == null){
        return
      }
      // 获取离线推荐的用户商品列表
      const { data: list } = await this.$http.get(`/product/getOfflineUserRecs/${userId}`);
      const dataList = list.data.data;
      if (dataList == null || 0 == dataList.length) {
        this.has_offline_rec = false;
        return;
      }
      this.has_offline_rec = true;
      const result = dataList[0].productList;
      this.offlineRecProductList = this.createElRows(result);
    },
    async getRealtimeRecProducts(userId) {
      if(userId == "" || userId == null){
        return
      }
      // 获取实时推荐的用户商品列表
      const { data: list } = await this.$http.get(`/product/getRealtimeUserRecs/${userId}`);
      const dataList = list.data.data;
      if (dataList == null || 0 == dataList.length) {
        this.has_realtime_rec = false;
        return;
      }
      this.has_realtime_rec = true;
      const result = dataList[0].productList;
      this.realtimeRecProductList = this.createElRows(result);
    },
    createElRows(list) {
      var resultList = []; // 定义一个空数组，作为该方法的返回值
      var count = 1;
      var goods_len = list.length;
      if (goods_len > 0) {
        //先计算总的有多少行,对应有多少个数组与之对应
        var rows = Math.ceil(goods_len / 6);
        //每行有6列
        for (var i = 0; i < rows; i++) {
          // 创建一个对象
          var rowObj = {
            rowIndex: i,
            data: [],
          };
          for (var j = 0; j < goods_len; j++) {
            var item = list[j];
            if (j >= 6 * (count - 1) && j < 6 * count) {
              rowObj.data.push(item); // 将符合要求的放入当前对象
            }
          }
          count++;
          resultList.push(rowObj);
        }
      }
      return resultList;
    },
  },
};
</script>
<style lang="less" scoped>
.home_container {
  height: 100%;
}
.el-container {
  height: 100%;
}
.el-header {
  background-color: #f5f5f5;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  background-color: #fff;
  color: #333;
  text-align: center;
}
// 商品分类面包屑div样式
.type_tags {
  height: 40px;
  width: 100%;
  background-color: #f5f5f5;
  border: 1px solid #e9e9e9;
}
// 默认商品显示区域样式
.goods_container {
  height: auto;
  margin-top: 20px;
}
// 商品按照列布局的样式
.el-col {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
// 卡片显示商品样式
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.img_div{
  height: 250px;
  width: 100%;
}

.two-line-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image {
  width: 100%;
  height: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

// 热门商品-头部样式
.hot_goods_header {
  height: 49px;
  background-color: #fff;
  border: 1px solid #f5f5f5;
  margin-top: 20px;
  display: flex;
  justify-content: left;
  line-height: 49px;
  font-size: 18px;
  color: coral;
  div:nth-child(1) {
    margin-left: 20px;
    margin-right: 10px;
  }
}
// 热门商品-内容样式
.red_goods_container {
  height: auto;
  margin-top: 10px;
}
</style>